<template>
  <div class="app-container">
   <el-dialog
  :title="title"
  :visible.sync="showWorkOrder"
  width="50%"
   
  :before-close="handleClose">
  
   <el-descriptions title="用户信息" :column="2">
    <el-descriptions-item label="门店名称">{{shopListMap[orderDetails.shopId]? shopListMap[orderDetails.shopId].shopName:orderDetails.washShop}}</el-descriptions-item>
    <el-descriptions-item label="订单号">{{orderDetails.orderNo}}</el-descriptions-item>
    <el-descriptions-item label="手机号码">{{orderDetails.customPhone}}</el-descriptions-item>
    <el-descriptions-item label="预约时间">{{orderDetails.createTime}}</el-descriptions-item>
    <el-descriptions-item label="商品信息">{{orderDetails.goodsName}}</el-descriptions-item>
      <el-descriptions-item label="商品总价">{{orderDetails.totalPrice}}（元）</el-descriptions-item>
    </el-descriptions>
       
    <el-timeline style="margin-top: 40px; height: 35vh; overflow: auto;" v-if="workNumber">
    <el-timeline-item  placement="top"
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.createTime">
        <el-card>
        <h4>{{activity.content}}</h4>
        <p>{{activity.createBy}} 提交于 {{activity.createTime}}</p>
      </el-card>

    </el-timeline-item>
  </el-timeline>
    
  <el-input v-model="form.content" type="textarea" placeholder="请输入工单内容" v-show="workOrder.status!=1">

  </el-input>
   
   <!-- <el-button>新增节点</el-button> -->

   <span slot="footer" class="dialog-footer" v-show="workOrder.status!=1">
    <el-button @click="handleClose">取 消</el-button>

    <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>

// 创建和更新工单
import { create , detail } from '@/api/workOrder'
import { getOrderDetail } from '@/api/order'
import { Loading } from 'element-ui';
export default {
  props:{
    details:Object,
    showWorkOrder:Boolean,
    workNumber:String,
    rollBackFn:Function,
    shopListMap:Object

  }, 
  name: "createAndUpdateWorkOrder",
  data() {
    return {
        form:{},
        loading:false,
        orderDetails:{},
        workOrder:{},
        title:"新增工单",
        activities: [
    ]
      
    };
  },

  created() {
    // console.info("传递过来的工单信息",this.details)
   if(this.workNumber){
      this.title="编辑工单"
   }
    
  },

  watch:{
      details(newData,oldData){
            this.details=newData
            // console.info(newData)
            // this.orderDetails=newData
            // console.info("已经更改数据",this.details)
            this.getOrderDetails()
            if(this.workNumber){
               this.getWorkOrderDetails()
            }
      }, 
  },
  methods: {

    submit(){
     this.loading=true
     create({orderId:this.details.orderId,... this.form}).then(res=>{
        this.form.content=""
        this.$message.success("操作成功")
         this.rollBackFn()
         this.loading=false
        
     })

    },

    getWorkOrderDetails(){
      // console.info("请求orderDetails数据")
       detail({workOrderId:this.workNumber}).then(res=>{
               this.activities=res.data.workOrderNode
               this.workOrder=res.data.workOrder
       })


    },
    
    getOrderDetails(){
     getOrderDetail(this.details.orderId).then(res=>{
      let goodsNameDesc="";
          this.orderDetails=res.data
              res.data.orderGoodPoList.forEach(orderGoodsName=>{
                  goodsNameDesc=goodsNameDesc+"|"+orderGoodsName.name+"["+orderGoodsName.shoesNum+"份]"
          })
          goodsNameDesc=goodsNameDesc.substring(1,goodsNameDesc.length)
          this.orderDetails.goodsName=goodsNameDesc
          
          
     })




    },
    handleClose(){
       
         this.$emit('cancel-workOrder-click')
    },
  }
};
</script>

<style scoped lang="scss">

</style>
